<template>
  <div class="scope-of-drug-use">
    <div class="medical-title-box">
      <span class="medical-title-name">基于病种的人员画像</span>
      <span class="title-bk-container"></span>
    </div>
    <div class="medical-help">
      <div class="drug-name">
        病种名称：{{drugName}}
      </div>
      <el-tooltip class="item" effect="dark" placement="left">
        <div slot="content" style="line-height:24px;" v-html="explain"></div>
        <svg class="searchBtn searchSvg medicalHelpSvg" style="display:none;" viewBox="0 0 1024 1024">
          <path :d="svgPath.helpBtn"></path>
        </svg>
      </el-tooltip>
    </div>
    <div v-show="showChart" class="disease-species-name">
      <div class="disease-species-name-item">
        <img src="../../../assets/img/chart-svg/age-scatter.svg" alt="">
        基于年龄段的就诊人员分析
      </div>
      <div class="disease-species-name-item">
        <img src="../../../assets/img/chart-svg/sex-scatter.svg" alt="">
        性别分布
      </div>
      <div class="disease-species-name-item">
        <img src="../../../assets/img/chart-svg/medical-time.svg" alt="">
        就诊时间分布
      </div>
    </div>
    <div class="medical-chart-box" :style="{height:height-265+'px'}">
      <div v-show="showChart"  class="disease-species-item" id="medical-age"></div>
      <div v-show="showChart" class="disease-species-item" id="medical-sex"></div>
      <div v-show="showChart" class="disease-species-item" id="medical-time"></div>
    </div>
    <div v-show="showChart" class="medical-conclusion-box">
      <span>结论：</span>
      <div class="medical-conclusion-container"></div>
    </div>
    <div v-show="showChart" class="colligateChart-go-next" @click="goToNext">
      查看就诊人员分布详情 >>>
    </div>
  </div>
</template>
<script>
  import { svgPath, loadingOpt } from "../../../assets/js/utils";
  import insuredPersonnel from "../../../assets/img/chart-svg/medical-people.svg";
  import { baseApiF } from "../../../api/api";
  import { bus } from "../../last/filter/js/bus";

  export default {
    props: ["isChange", "height"],
    data() {
      return {
        drugName: "帕金森综合症",
        svgPath,
        explain: "此图的说明",
        insuredPersonnel,
        params:{},
        showChart:true,
      }
    },
    activated() {
      this.getData(this.params);
    },
    watch: {
      height() {
      },
      isChange() {
        setTimeout(() => {
          this.resizeChart();
        }, 201);
      }
    },
    mounted() {
      this.myChart1 = this.$echarts.init(document.getElementById("medical-age"));
      this.myChart2 = this.$echarts.init(document.getElementById("medical-sex"));
      this.myChart3 = this.$echarts.init(document.getElementById("medical-time"));
      bus.$on("sendDiseaseTypeFilter", (disFilter) => {
        this.params = disFilter;
        this.drugName = disFilter.disDetail.disName;
        this.getData(disFilter);
      });
    },
    methods: {
      goToNext() {
        let that = this;
        let data = {};
        data.areaCode = that.params.areaCode;
        data.areaName = that.params.areaCodeText;
        data.queryYear = that.params.queryYear;
        data.hospLevel = that.params.hospLevel;
        data.hospCode = that.params.hospCode;
        data.medicalTypeCode = that.params.medicalCategory;
        data.disName = that.params.disDetail.disName;
        data.disId = that.params.disDetail.disCode;
        data.resultLevel = that.params.resultLevel;
        data.medicalType = that.params.medicalCategoryName;
        this.$router.push({
          path: `/decision/medical-analysis/single-disease-medical-personnel-distribution-detail`,
          query: data
        });
      },
      getData(params) {
        let data = {};
        data.areaCode = params.areaCode;
        data.queryYear = params.queryYear;
        data.hospCode = params.hospCode;
        data.hospLevel = params.hospitalLevel;
        data.yiLiaoLeiBie = params.medicalCategory;
        data.bingZhongId = params.disDetail.disCode;
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.clearChart();
          this.showLoading();
          this.$axios.post(`${baseApiF()}report/TreatmentByDiseasePersonPicture`,data).then(res=>{
            let mes = res.data;
            if(mes.code==0){
              this.showChart = true;
              this.hideLoading();
              this.drawMedicalSex(mes.data.xingBieMap)
              this.drawMedicalTime(mes.data.shiJianFenBuMap)
              this.drawMedicalAge(mes.data.nianLingDuanMap)
            }else{
              this.showChart = false;
            }
          })
        },300)
      },
      //性别
      drawMedicalSex(json){
        // console.log(json)
        let realNum = json.zhanBi;
        let targetNum = json.muBiaoZhanBi;
        let legendArr = [];
        let orangeNum = [];
        let yellowNum = [];
        let blackNum = [];
        let surplusNum = [];
        let pieData=[];
        let colorList = ['#3281fd', '#ff6a93', '#8a8a8a', '#ccc'];
        json.xingBieFenBu.map((item,i)=>{
          pieData.push({value:json.jiuZhenRenShu[i],name:item+json.zhanBi[i]+'%',itemStyle:{color:colorList[i]}})
          legendArr.push(`${item}${realNum[i]}%`)
          if(targetNum[i]==0){
            orangeNum.push(realNum[i])
            yellowNum.push(0)
            blackNum.push(0)
            surplusNum.push(Number((100-realNum[i]).toFixed(2)))
          }else if(targetNum[i]<realNum[i]){
            orangeNum.push(targetNum[i])
            yellowNum.push(Number((realNum[i]-targetNum[i]).toFixed(2)))
            blackNum.push(0)
            surplusNum.push(Number((100-realNum[i]).toFixed(2)))
          }else if(targetNum[i]>realNum[i]){
            orangeNum.push(targetNum[i])
            yellowNum.push(0)
            blackNum.push(Number((targetNum[i]-realNum[i]).toFixed(2)))
            surplusNum.push(Number((100-targetNum[i]).toFixed(2)))
          }else{
            orangeNum.push(realNum[i])
            yellowNum.push(0)
            blackNum.push(0)
            surplusNum.push(Number((100-realNum[i]).toFixed(2)))
          }
        })
        let that = this;
        let placeHolderStyle = {
          normal : {
            color: 'rgba(0,0,0,0)',
            label: {show:false},
            labelLine: {show:false}
          },
          emphasis : {
            color: 'rgba(0,0,0,0)'
          }
        };
        this.myChart2.setOption({
          backgroundColor:'#1B2B44',
          title: {
            text: `{c|}\n{a|就诊人员}\n{b|${json.jiuZhenRenYuanZongShu}}`,
            x: "center",
            y: "23%",
            textStyle: {
              fontSize: 20,
              color: "#67ffdb",
              fontWeight: "bolder",
              rich: {
                a: {
                  lineHeight: 28,
                  fontSize: 18,
                  fontWeight: "bold"
                },
                b: {
                  fontSize: 16,
                  fontWeight: "bold"
                  // padding:[0,0,0,40]
                },
                c: {
                  backgroundColor: {
                    image: that.insuredPersonnel
                  },
                  width: 30,
                  height: 25
                }
              }
            }
          },
          legend: {
            orient: 'vertical',
            align:"left",
            left:"center",
            bottom: 15,
            icon: 'rect',
            itemWidth: 10,
            itemHeight: 10,
            selectedMode: false,
            textStyle: {
              color: '#fff',
            },
          },
          tooltip: {
            show: true,
            textStyle: {
              fontSize: 12
            },
            formatter: function(params) {
              if (params.name == "invisible") {
                return "";
              } else {
                let i = params.dataIndex;
                let title = "";
                if (i == 0) {
                  title = "男性";
                } else if (i == 1) {
                  title = "女性";
                } else {
                  title = "未知";
                }
                let txt = `
                          <p>性别分布</p>
                          <p>性别：${title}</p>
                          <p>就诊人数：${json.jiuZhenRenShuXianShi[i]}</p>
                          <p>占总人数比例：${json.zhanBi[i]}%</p>
              `;
                // <p>目标就诊人数：${json.muBiao[i]}</p>
                // <p>目标占总人数比例：${json.muBiaoZhanBi[i]}%</p>
                return txt;
              }
            }
          },
          series: [
            {
              minAngle: 5,
              center: ["50%", "35%"],
              name: json.reportName,
              type: "pie",
              radius: ["45%", "65%"],
              hoverAnimation: false,
              label: {
                normal: {
                  show: false,
                  position: "center"
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: pieData
            }
          ]
          /*grid:{
            width:'80%',
            height:'80%'
          },
          tooltip:{
            show:true,
            textStyle :{
              fontSize:12
            },
            formatter:function(params){
              if(params.name=='invisible'){
                return ''
              }else{
                let i = params.seriesIndex;
                let title = '';
                if(i==0){
                  title = '男性'
                }else if(i==1){
                  title = '女性'
                }else{
                  title = '未知'
                }
                let txt = `
                          <p>性别分布</p>
                          <p>性别：${title}</p>
                          <p>就诊人数：${json.jiuZhenRenShuXianShi[i]}</p>
                          <p>占总人数比例：${json.zhanBi[i]}%</p>
              `
                // <p>目标就诊人数：${json.muBiao[i]}</p>
                // <p>目标占总人数比例：${json.muBiaoZhanBi[i]}%</p>
                return txt;
              }
            }
          },
          title: {
            text: `{c|}\n{a|就诊人员}\n{b|${json.jiuZhenRenYuanZongShu}}`,
            x: 'center',
            y: 'center',
            textStyle : {
              fontSize : 20,
              color:'#67ffdb',
              fontWeight : 'bolder',
              rich:{
                a:{
                  lineHeight:28,
                  fontSize:18,
                  fontWeight:'bold'
                },
                b:{
                  fontSize:16,
                  fontWeight:'bold'
                  // padding:[0,0,0,40]
                },
                c:{
                  backgroundColor:{
                    image:that.insuredPersonnel
                  },
                  width:30,
                  height:25
                },
              }
            }
          },
          legend: {
            orient : 'vertical',
            x : '52%',
            // y : that.pieTitlePosition,
            top:'10%',
            textStyle:{
              color:'#fff'
            },
            selectedMode:false,
            icon: 'rect',
            itemWidth:10,
            itemHeight:10,
            data:legendArr,
          },
          series : [
            {
              type:'pie',
              clockWise:false,
              hoverAnimation:false,
              radius : ['60%', '75%'],
              label: {show:false},
              labelLine: {show:false},
              name:legendArr[0],
              itemStyle:{
                color:'#3281fd'
              },
              data:[
                {
                  value:orangeNum[0],
                  // value:50,
                  minAngle:5,
                  itemStyle:{
                    color:'#3281fd'
                  },
                },
                {
                  value:yellowNum[0],
                  itemStyle:{
                    color:yellowNum[0]==0?'rgba(0,0,0,0)':'#ffd66a'
                  },
                },
                {
                  value:blackNum[0],
                  itemStyle:{
                    color:blackNum[0]==0?'rgba(0,0,0,0)':'#3a598c'
                  },
                },
                {
                  value:surplusNum[0],
                  name:'invisible',
                  itemStyle : placeHolderStyle
                }
              ]
            },
            {
              type:'pie',
              clockWise:false,
              hoverAnimation:false,
              radius : ['45%', '60%'],
              name:legendArr[1],
              minAngle:5,
              label: {show:false},
              labelLine: {show:false},
              itemStyle:{
                color:'#ff6a93'
              },
              data:[
                {
                  value:orangeNum[1],
                  // value:50,
                  minAngle:10,
                  itemStyle:{
                    color:'#ff6a93'
                  },
                },
                {
                  value:yellowNum[1],
                  itemStyle:{
                    color:yellowNum[1]==0?'rgba(0,0,0,0)':'#ffd66a'
                  },
                },
                {
                  value:blackNum[1],
                  itemStyle:{
                    color:blackNum[1]==0?'rgba(0,0,0,0)':'#3a598c'
                  },
                },
                {
                  value:surplusNum[1],
                  name:'invisible',
                  itemStyle : placeHolderStyle
                }
              ]
            },
            {
              type:'pie',
              name:legendArr[2],
              clockWise:false,
              hoverAnimation:false,
              radius : ['30%', '45%'],
              label: {show:false},
              labelLine: {show:false},
              itemStyle:{
                color:'#a8a8a8',
              },
              minAngle:5,
              data:[
                {
                  value:orangeNum[2],
                  itemStyle:{
                    color:json.jiuZhenRenShu[2]==0?'rgba(0,0,0,0)':'#a8a8a8',
                    // color:'#a8a8a8'
                  },
                },
                {
                  value:yellowNum[2],
                  itemStyle:{
                    color:yellowNum[2]==0?'rgba(0,0,0,0)':'#ffd66a',
                  },
                },
                {
                  value:blackNum[2],
                  itemStyle:{
                    color:blackNum[2]==0?'rgba(0,0,0,0)':'#3a598c'
                  },
                },
                {
                  value:surplusNum[2],
                  name:'invisible',
                  itemStyle : placeHolderStyle
                }
              ]
            }
          ]*/
        });
      },
      //就诊时间分布
      drawMedicalTime(json) {
        let realNum = json.zhanBi;
        let targetNum = json.muBiaoZhanBi;
        let obj = this.handleData(realNum, targetNum);
        let xAxisData = [];
        json.shiJianFenBuU.map((item, i) => {
          xAxisData.push(i);
        });
        this.myChart3.setOption({
          backgroundColor: "#1B2B44",
          grid: {
            top: 40,
            left: "1%"
          },
          tooltip: {
            show: true,
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            textStyle: {
              fontSize: 12
            },
            formatter: function(params) {
              let i = params[0].dataIndex;
              // <p>目标就诊人数：${json.muBiao[i]}</p>
              // <p>目标占总人数比例：${json.muBiaoZhanBi[i]}%</p>
              let txt = `
                          <p>就诊时间分布</p>
                          <p>就诊时间：${json.shiJianFenBuU[i]}(${json.shiJianFenBuD[i]})</p>
                          <p>就诊人数：${json.jiuZhenRenShuXianShi[i]}</p>
                          <p>占总人数比例：${json.zhanBi[i]}%</p>
              `;
              return txt;
            }
          },
          yAxis: {
            show: false
          },
          xAxis: {
            data: xAxisData,
            axisLine: {
              show: false // 显示x轴坐标线并设置为虚线
            },
            axisTick: {
              show: false // 不显示x轴坐标的刻度
            },
            axisLabel: {
              show: true,// 显示x轴坐标数值
              interval: 0,
              textStyle: {
                color: "#fff",
                lineHeight: 18
              },
              formatter: function(val) {
                let txt = json.shiJianFenBuU[val];
                return `{a|${txt}}\n${json.shiJianFenBuD[val]}`;
              },
              rich: {
                a: {
                  lineHeight: 16
                }
              }
            }
          },
          series: [{
            type: "bar",
            data: obj.orangeNum,
            stack: "age",
            color: "#ff6a93",
            barWidth: "40%",
            barMaxWidth: 30,
            label: {
              show: true,
              position: "top",
              formatter: function(params) {
                let i = params.dataIndex;
                if (obj.blackNum[i] + obj.yellowNum[i] == 0) {
                  return `${json.zhanBi[i]}%`;
                } else {
                  return "";
                }
              },
              color: "#fff"
            }
          }, {
            type: "bar",
            data: obj.yellowNum,
            stack: "age",
            color: "#ffd66a",
            barWidth: "40%",
            barMaxWidth: 30,
            label: {
              show: true,
              position: "top",
              formatter: function(params) {
                let i = params.dataIndex;
                if(params.value!=0){
                  return `${json.zhanBi[i]}%`
                }else{
                  return ''
                }
              },
              color:'#fff'
            }
          },{
            type:'bar',
            data:obj.blackNum,
            stack:'age',
            color:'#3a598c',
            barWidth:'40%',
            barMaxWidth:30,
            label:{
              show:true,
              position:'top',
              formatter:function(params){
                let i = params.dataIndex;
                if(params.value!=0){
                  return `${json.zhanBi[i]}%`
                }else{
                  return ''
                }
              },
              color:'#fff'
            }
          }]
        })
      },
      //基于年龄段的就诊人员比例
      drawMedicalAge(json){
        let realNum = json.zhanBi;
        let targetNum = json.muBiaoZhanBi;
        let obj = this.handleData(realNum,targetNum);
        let newArr = obj.orangeNum;
        let x = json.nianLingDuan;
        let dataShadow = [];
        for (let i = 0; i < x.length; i++) {
          dataShadow.push(100);
        }
        this.myChart1.setOption({
          backgroundColor:'#1B2B44',
          tooltip:{
            show:true,
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle :{
              fontSize:12
            },
            formatter:function(params){
              let i = params[0].dataIndex;
              let name = params[0].name;
              // <p>目标就诊人数：${json.muBiao[i]}</p>
              // <p>目标占总人数比例：${json.muBiaoZhanBi[i]}%</p>
              let txt = `
                          <p>年龄段分布</p>
                          <p>年龄段：${name}</p>
                          <p>就诊人数：${json.jiuZhenRenShuXianShi[i]}</p>
                          <p>占总人数比例：${json.zhanBi[i]}%</p>
              `;
              return txt;
            }
          },
          grid: {
            top: 5,
            right:60,
            bottom:10,
            left: 100
          },
          xAxis: {
            show: false
          },
          yAxis: {
            data: x,
            inverse: true,
            axisLine: {
              show: false // 显示x轴坐标线并设置为虚线
            },
            axisTick: {
              show: false // 不显示x轴坐标的刻度
            },
            axisLabel: {
              show: true,// 显示x轴坐标数值
              textStyle: {
                color: "#fff"
              }
            }
          },
          series: [{ // For shadow
            type: "bar",
            itemStyle: {
              normal: { color: "rgba(255,255,255,0.05)" }
            },
            barGap: "-100%",
            barCategoryGap: "40%",
            data: dataShadow,
            barWidth: "40%",
            barMaxWidth: 20,
            label: {
              show: true,
              position: "right",
              formatter: function(params) {
                let i = params.dataIndex;
                return `${newArr[i]}%`;
              },
              color: "#fff"
            },
            animation: false
          }, {
            type: "bar",
            data: newArr,
            // stack:'profession',
            color: "#3281fd",
            barWidth: "40%",
            barMaxWidth: 20,
            animation: false
          }]
        });
        let option = {
          tooltip: {
            show: true,
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            textStyle: {
              fontSize: 12
            },
            formatter: function(params) {
              let i = params[0].dataIndex;
              let name = params[0].name;
              // <p>目标就诊人数：${json.muBiao[i]}</p>
              // <p>目标占总人数比例：${json.muBiaoZhanBi[i]}%</p>
              let txt = `
                          <p>职业分布</p>
                          <p>职业类型：${name}</p>
                          <p>就诊人数：${json.jiuZhenRenShuXianShi[i]}</p>
                          <p>占总人数比例：${json.zhanBi[i]}%</p>
              `;
              return txt;
            }
          },
          grid: {
            top: "10%",
            height: "80%",
            width: "60%",
            left: "15%"
          },
          xAxis: {
            show: false
          },
          yAxis: {
            data: json.zhiYeFenBu,
            inverse: true,
            axisLine: {
              show: false // 显示x轴坐标线并设置为虚线
            },
            axisTick: {
              show: false // 不显示x轴坐标的刻度
            },
            axisLabel: {
              show: true,// 显示x轴坐标数值
              textStyle: {
                color: "#fff"
              }
            }
          },
          series: [{
            type: "bar",
            data: obj.orangeNum,
            stack: "profession",
            color: "#ff6a93",
            barWidth: "60%",
            barMaxWidth: 30,
            label: {
              show: true,
              position: "right",
              formatter: function(params) {
                let i = params.dataIndex;
                if (obj.blackNum[i] + obj.yellowNum[i] == 0) {
                  return `${json.zhanBi[i]}%`;
                } else {
                  return "";
                }
              },
              color: "#fff"
            }
          }, {
            type: "bar",
            data: obj.yellowNum,
            stack: "profession",
            color: "#ffd66a",
            barWidth: "60%",
            barMaxWidth: 30,
            label: {
              show: true,
              position: "right",
              formatter: function(params) {
                let i = params.dataIndex;
                if (params.value != 0) {
                  return `${json.zhanBi[i]}%`;
                } else {
                  return "";
                }
              },
              color: "#fff"
            }
          }, {
            type: "bar",
            data: obj.blackNum,
            stack: "profession",
            color: "#3a598c",
            barWidth: "60%",
            barMaxWidth: 30,
            label: {
              show: true,
              position: "right",
              formatter: function(params) {
                let i = params.dataIndex;
                if (params.value != 0) {
                  return `${json.zhanBi[i]}%`;
                } else {
                  return "";
                }
              },
              color: "#fff"
            }
          }]
        };
      },
      //处理目标值
      handleData(realNum, targetNum) {
        let orangeNum = [];
        let yellowNum = [];
        let blackNum = [];
        realNum.map((item, index) => {
          if (targetNum[index] == 0) {
            orangeNum.push(item);
            yellowNum.push(0);
            blackNum.push(0);
          } else if (targetNum[index] > item) {
            orangeNum.push(item);
            yellowNum.push(0);
            blackNum.push(Number((targetNum[index] - item).toFixed(2)));
          } else if (targetNum(index) < item) {
            orangeNum.push(targetNum(index));
            yellowNum.push(Number((item - targetNum[index]).toFixed(2)));
            black.push(0);
          } else {
            orangeNum.push(item);
            yellowNum.push(0);
            blackNum.push(0);
          }
        });
        let obj = {};
        obj.orangeNum = orangeNum;
        obj.yellowNum = yellowNum;
        obj.blackNum = blackNum;
        return obj;
      },
      showLoading(){
        this.myChart1.showLoading(loadingOpt);
        this.myChart2.showLoading(loadingOpt);
        this.myChart3.showLoading(loadingOpt);
      },
      hideLoading(){
        this.myChart1.hideLoading();
        this.myChart2.hideLoading();
        this.myChart3.hideLoading();
      },
      clearChart(){
        this.myChart1.clear();
        this.myChart2.clear();
        this.myChart3.clear();
      },
      resizeChart(){
        this.myChart1.resize();
        this.myChart2.resize();
        this.myChart3.resize();
      }
    }
  }
</script>
<style scoped>
  @import '../../../assets/css/medical-analysis.css';
  .scope-of-drug-use{
    width:100%;
    height:100%;
  }
  .medical-help{
    clear:both;
    height:32px;
    line-height:32px;
    color:#fff;
    padding:10px 20px 10px 40px;
  }
  .drug-name{
    float:left;
  }
  .medicalHelpSvg{
    width:20px;
    /*margin-top:6px;*/
    height:20px;
    float:right;
    fill:#fff;
    cursor:pointer;
  }
  .disease-species-name{
    height: 32px;
    line-height: 32px;
    color: #fff;
    margin-left:40px;
  }
  .disease-species-name-item{
    float:left;
    width:33.3%;
  }
  .disease-species-name-item img{
    height: 20px;
    margin-top: 6px;
    width: 20px;
    float: left;
    margin-right: 10px;
  }
  .medical-chart-box{
    /*margin-left:40px;*/
    overflow:hidden;
  }
  .disease-species-item{
    float:left;
    width:33.3%;
    height:100%;
  }

  .medical-chart-box{
    background: url('../../../assets/img/noData.png') no-repeat center 50%;
    background-size:16%;
  }
</style>
